/*!
 * Copyright 2014-2024  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
 */
@import '../_tokens/index';

:root {
  --toc-hover-color: var(--color-b08);
  --toc-font: 400 13px/24px var(--font-family-default);
  --toc-color: var(--color-text);
  --toc-link-hover-gradient: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(17, 0, 0, 0.08) 100%);
  --toc-button-hover-gradient: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 100%);
  --toc-item-padding-left: 8px;
  --toc-item-padding-right: 4px;
  --toc-item-padding-top: 8px;
  --toc-item-padding-bottom: 8px;
  --toc-item-padding-left-mobile: 8px;
  --toc-item-padding-right-mobile: 4px;
  --toc-item-padding-top-mobile: 14px;
  --toc-item-padding-bottom-mobile: 14px;
  --toc-icon-size: 24px;
  --toc-button-width: calc(var(--toc-icon-size) + 2 * var(--toc-item-padding-left));
}

.theme-dark {
  --toc-hover-color: var(--color-w08);
  --toc-color: var(--color-text-dt);
  --toc-link-hover-gradient: linear-gradient(270deg, rgba(255, 255, 255, 0.08) 0%, rgba(17, 0, 0, 0) 100%);
  --toc-button-hover-gradient: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(17, 0, 0, 0) 100%);
}

@media (width < $breakpoint-desktop-min) {
  .theme-dark_mobile {
    --toc-color: var(--color-text-dt);
    --toc-hover-color: var(--color-w08);
    --toc-link-hover-gradient: linear-gradient(270deg, rgba(255, 255, 255, 0.08) 0%, rgba(17, 0, 0, 0) 100%);
    --toc-button-hover-gradient: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(17, 0, 0, 0) 100%);
  }
}

.toc {
  &--part {
    box-sizing: border-box;

    color: var(--toc-color);

    font: var(--toc-font);
  }

  &--row {
    position: relative;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    user-select: none; /* there's a weird bug with text selection */
  }

  &--button {
    position: absolute;

    display: inline-flex;
    align-items: flex-start;
    flex-shrink: 0;
    justify-content: flex-end;

    min-width: var(--toc-button-width);
    height: 100%;

    padding: 0 var(--toc-item-padding-right) 0 0;

    cursor: pointer;

    border: none;
    background-color: inherit;

    &::after {
      position: absolute;
      top: 50%;

      width: var(--toc-icon-size);
      height: var(--toc-icon-size);
      margin-top: calc(var(--toc-icon-size) / -2);

      content: ' ';

      transform: rotate(0deg);

      background-image: url('../_assets/arrow-down.svg');

      background-repeat: no-repeat;
      background-position: center;
      background-size: 24px 24px;

      font-size: 0;
      line-height: 0;
      filter: invert(1);

      .toc--part_hidden & {
        transform: rotate(-90deg);
      }

      .theme-dark & {
        filter: invert(0);
      }

      @media (width < $breakpoint-desktop-min) {
        .theme-dark_mobile & {
          filter: invert(0);
        }
      }
    }

    &:hover {
      background: var(--toc-button-hover-gradient);
    }

    &:focus-visible {
      outline: var(--focus-outline);
      box-shadow: inset 4px 0 0 var(--color-key-blue-50);
    }
  }

  &--link {
    box-sizing: border-box;

    width: 100%;
    padding: var(--toc-item-padding-top) var(--toc-item-padding-right) var(--toc-item-padding-bottom) 0;

    color: inherit;

    @media (width < $breakpoint-desktop-min) {
      padding: var(--toc-item-padding-top-mobile) var(--toc-item-padding-right-mobile)
        var(--toc-item-padding-bottom-mobile) 0;
    }

    &:hover {
      background: var(--toc-hover-color);
    }

    &:focus-visible {
      outline: var(--focus-outline);
      outline-offset: 0;
      box-shadow:
        inset 4px 0 0 var(--color-key-blue-50),
        inset -4px 0 0 var(--color-key-blue-50);

      .toc--button ~ & {
        box-shadow: inset -4px 0 0 var(--color-key-blue-50);
      }
    }
  }

  &--skip-link {
    position: absolute;

    z-index: 100;

    margin-top: 36px;

    padding: 1px;

    color: var(--color-w100);
    background-color: var(--color-key-blue-hover);

    font: var(--toc-font);

    &:not(:focus) {
      overflow: hidden !important;
      clip: rect(1px, 1px, 1px, 1px) !important;

      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;

      border: 0 !important;
    }

    &:focus {
      outline: var(--focus-outline);
      outline-offset: 0;
    }

    .sidebar > & {
      margin-top: 0;
    }

    // to show skip links only for expanded parts
    .toc--part_hidden > .toc--row > .toc--button ~ & {
      display: none;
    }

    @media (width < $breakpoint-desktop-min) {
      display: none;
    }
  }

  @for $i from 0 through 10 {
    &--part[data-nesting-level='#{$i}'] {
      $indent-width: calc(var(--toc-icon-size) * $i);

      .toc--row > .toc--link:first-child {
        padding-left: calc(var(--toc-button-width) + #{$indent-width});
      }

      .toc--button + .toc--link {
        margin-left: calc(var(--toc-button-width) + #{$indent-width});
      }

      .toc--button {
        width: calc(var(--toc-button-width) + #{$indent-width});
      }
    }
  }

  .filtered > a,
  .filtered > &--button {
    display: none;
  }

  #nav-submenu {
    padding-left: 24px;
  }

  &--part_hidden > &--part {
    display: none;
  }

  &--row &--link-grid {
    display: grid;
    grid-template-columns: 16px auto; /* first is the icon, then name */
    grid-gap: 6px;
  }

  &--icon {
    width: 16px;
    height: 16px;

    line-height: 32px;
  }

  &--button + &--link:hover {
    background: var(--toc-link-hover-gradient);
  }

  &--icon.class::before {
    content: url('../_assets/nav-icons/class.svg');
  }

  &--icon.class-kt::before {
    content: url('../_assets/nav-icons/class-kotlin.svg');
  }

  &--icon.function::before {
    content: url('../_assets/nav-icons/function.svg');
  }

  &--icon.enum-class::before {
    content: url('../_assets/nav-icons/enum.svg');
  }

  &--icon.enum-class-kt::before {
    content: url('../_assets/nav-icons/enum-kotlin.svg');
  }

  &--icon.annotation-class::before {
    content: url('../_assets/nav-icons/annotation.svg');
  }

  &--icon.annotation-class-kt::before {
    content: url('../_assets/nav-icons/annotation-kotlin.svg');
  }

  &--icon.abstract-class::before {
    content: url('../_assets/nav-icons/abstract-class.svg');
  }

  &--icon.abstract-class-kt::before {
    content: url('../_assets/nav-icons/abstract-class-kotlin.svg');
  }

  &--icon.exception-class::before {
    content: url('../_assets/nav-icons/exception-class.svg');
  }

  &--icon.interface::before {
    content: url('../_assets/nav-icons/interface.svg');
  }

  &--icon.interface-kt::before {
    content: url('../_assets/nav-icons/interface-kotlin.svg');
  }

  &--icon.object::before {
    content: url('../_assets/nav-icons/object.svg');
  }

  &--icon.typealias-kt::before {
    content: url('../_assets/nav-icons/typealias-kotlin.svg');
  }

  &--icon.val::before {
    content: url('../_assets/nav-icons/field-value.svg');
  }

  &--icon.var::before {
    content: url('../_assets/nav-icons/field-variable.svg');
  }
}

.toc--part[data-active] > .toc--row {
  & .toc--link,
  & .toc--button {
    color: var(--color-text-dt);
    background-color: var(--color-key-blue);

    &::after {
      filter: invert(0);
    }
  }

  & .toc--link:hover {
    background-color: var(--color-key-blue-hover);
  }

  & .toc--button ~ .toc--link:hover {
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.16) 0%, rgba(17, 0, 0, 0) 100%), var(--color-key-blue);
  }

  & .toc--button:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(17, 0, 0, 0) 100%), var(--color-key-blue);
  }
}

.sidebar {
  overflow: auto !important; // important do needed to override column-resizer styles

  box-sizing: border-box;
  width: var(--sidebar-width);

  border-right: 1px solid rgba(39, 40, 44, 0.2);

  @media (width < $breakpoint-desktop-min) {
    width: 0;

    border: none;
  }

  @media (width >= $breakpoint-desktop-min) {
    position: relative;
    z-index: 1;
  }

  & .button {
    @media (width < $breakpoint-desktop-min) {
      min-width: 52px;
      min-height: 52px;
    }
  }
}

.theme-dark .sidebar {
  border-right-color: lighten(rgb(50, 50, 55), 15%); // color-background-nav-dt
}

.no-js .sidebar {
  display: none;
}

.sidebar--inner {
  padding-top: 12px;
  padding-bottom: 12px;
}
